<template>
  <div class="teacherCourseInfo">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>学生课程表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20" class="mb-12">
      <el-col :span="6">
        <el-row>
          <el-col :span="11">
            <el-date-picker
              type="year"
              placeholder="开始学年"
              v-model="startYear"
              class="max-width"
              @change="getYear">
            </el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker
              type="year"
              placeholder="结束学年"
              v-model="endYear"
              class="max-width">
            </el-date-picker>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <div class="">
          <el-select v-model="form.term" placeholder="请选择学期" class="max-width">
            <el-option label="01" value="01"></el-option>
            <el-option label="02" value="02"></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="6" :offset="6">
        <div class="overflow-clear">
          <el-button type="primary" class="add-pd-26 float-right">搜索</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="mb-5 clearfix">
        <el-button type="primary" class="add-pd-26" @click="toTDM">
          教学资料
        </el-button>
      </el-button-group>
    </div>
    <el-table
      :data="courseInfo"
      style="width: 100%"
      :default-sort="{prop: 'courseID',order:'ascending'}">
      <el-table-column
        prop="courseID"
        label="课程名称"
        min-width="140"
        sortable>
      </el-table-column>
      <el-table-column
        prop="courseNameCN"
        label="课程名称"
        min-width="140"
        sortable>
      </el-table-column>
      <el-table-column
        prop="teacherName"
        label="任课老师"
        min-width="140">
      </el-table-column>
      <el-table-column
        prop="teacherTel"
        label="联系方式"
        min-width="140">
      </el-table-column>
      <el-table-column
        prop="credit"
        label="学分"
        min-width="140"
        sortable>
      </el-table-column>
      <el-table-column
        prop="courseHour"
        label="学时"
        min-width="140"
        sortable>
      </el-table-column>
      <el-table-column
        prop="weeklyHour"
        label="每周学时分配"
        min-width="152"
        sortable>
      </el-table-column>
      <el-table-column
        prop="scoringWay"
        label="记分方式"
        min-width="140">
      </el-table-column>
    </el-table>
    
  </div>
</template>

<script>
  export default {
    name: 'studentCourseInfo',
    data() {
      return {
        form: {
          academicYear: '',
          term: ''
        },
        academicYear: '',
        startYear: '',
        endYear: '',
        courseInfo: [],
        url: 'http://localhost:8080/TeachingMIS'
      }
    },
    created () {
		this.res();
    },
    methods: {
      res: function () {
        this.$http.post(`${this.url}/course/getCoursesForStudent`, this.form)
          .then((res) => {
            console.log(res.body)
            this.courseInfo = res.body.courseList
          })
          .catch(function(err) {
            console.log(err)
          })
      },
      getYear(val){
        this.endYear = (parseInt(val) + 1).toString()
        this.form.academicYear = val + '-' + this.endYear
      },
      toTDM(){
        this.$router.push({path: 'TeachingDocument', query: {courseID: this.courseID}})
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .max-width {
    width: 100% !important;
  }
  .add-pd-26{
    padding-left: 1.6em;
    padding-right:1.6em;
  }
</style>
